<template>
  <div class="record" :class="[list && list.length === 0 ? '' : 'warning']" v-auth="'maintenance'"
    :style="{ right: '0' }" v-show="!showRecord" @click="showRecord = true">
    维 护 记 录 <span class="count">({{ list.length }})</span>
  </div>
  <div id="record" v-if="showRecord">
    <div class="inner animate__animated animate__bounceInRight animate__faster">
      <div class="record activeStyle" :class="[list && list.length === 0 ? '' : 'warning']" v-show="showRecord"
        @click="close">
        维 护 记 录 <span class="count">({{ list.length }})</span>
      </div>
      <div class="top">
        <div class="title">维护记录</div>
        <CloseOutlined class="close" @click="close" />
      </div>
      <div class="container">
        <div class="wrap" v-for="(item, index) in list" :key="item.id">
          <div class="item">
            <div class="header">
              <div class="header-left">
                <div class="index">
                  <span>{{ index + 1 }}</span>
                </div>
                <div class="sub-title">应聘进度：{{ item.processStatus }}</div>
              </div>
              <div class="header-right">
                <div class="sub-title">应聘者状态：</div>
                <div class="status">{{ item.status }}</div>
                <img :src="getEmotion(item.status)" alt="" srcset="">
              </div>
            </div>
            <div class="content">
              {{ item.content }}
            </div>
            <div class="footer">
              <div class="footer-left">
                <div class="sub-title">操作人：{{ item.operator }}</div>
              </div>
              <div class="footer-right">
                <div class="sub-title">操作时间：{{ item.createTime }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="add-record" @click="addRecord">
        <i class="iconfont icon-tianjia"></i>
        <span>新增记录</span>
      </div>
    </div>
  </div>
  <Modal ref="modal" @notice="notice"></Modal>

</template>

<script setup lang='ts'>
import { ref, watch } from "vue"
import { getImageUrl } from "@/assets/common/common.ts";
import Modal from "../Modals/Modal.vue";
import { getRecord } from "@/api/application-details/index.ts";
import { comStores } from '@/store/common/comStore';
import { message } from "ant-design-vue";
const store = comStores()
export interface ListItem {
  id: number
  resumesId: number
  processStatus: string
  status: string
  content: string
  operator: string
  createTime: string
}


const modal = ref<any>(Modal);
const mapList = [
  { label: "很好", value: "5" },
  { label: "较好", value: "4" },
  { label: "一般", value: "3" },
  { label: "较差", value: "2" },
  { label: "很差", value: "1" },
]
const list = ref<ListItem[]>([]);
const getRecordList = async () => {
  const { resumeId } = store.currentResume
  const data = await getRecord({
    resumesId: resumeId
  });
  if (data && data.code === '10000') {
    list.value = data.data
  }
}
watch(() => store.currentResume.resumeId, (val) => {
  getRecordList()
}, { immediate: true })
const getEmotion = (type) => {
  const cur = mapList.find(el => el.label == type);
  return getImageUrl(`emotion-${cur?.value}.png`, 'applicationDetail');
}
const showRecord = ref<boolean>(false);

const close = () => {
  const element = document.querySelector('.inner') as HTMLDivElement;
  element.classList.add('animate__bounceOutRight'); // 添加动画类
  // 动画完成后移除元素
  element.addEventListener(
    'animationend',
    function () {
      element.style.display = 'none';
      showRecord.value = false
    },
    { once: true }
  );
}
const addRecord = () => {
  modal.value.showDialog('AddMaintenanceRecordsModal')
}
const notice = () => {
  getRecordList()
}
</script>

<style lang="less" scoped>
#record {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  .inner {
    width: 480px;
    height: 100%;
    background: #FFFFFF;
    // box-shadow: 0px 0px 14px 0px rgba(4, 50, 75, 0.3);
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 15px 0 0 15px;
    display: flex;
    flex-direction: column;

    .top {
      padding: 20px 20px;
      padding-bottom: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .title {
        font-weight: 500;
        font-size: 24px;
        color: #333;

      }
    }

    .container {
      padding: 0 20px;
      height: calc(100% - 170px);
      box-sizing: border-box;
      overflow: auto;
    }

    .wrap {
      display: flex;
      flex-direction: column;
      padding-top: 7px;
      box-sizing: border-box;

      box-sizing: border-box;

      .item {
        width: 440px;
        min-height: 100px;
        background: #F5F7FB;
        // box-shadow: 0px 0px 14px 0px rgba(4, 50, 75, 0.3);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 17px 16px;
        box-sizing: border-box;

        .header {
          display: flex;
          justify-content: space-between;

          .header-left {
            display: flex;

            .index {
              margin-right: 6px;
              width: 20px;
              height: 20px;
              background: #8F87D8;
              text-align: center;
              line-height: 20px;
              border-radius: 50%;
              position: relative;
              color: #fff;

              span {
                position: absolute;
                z-index: 11;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }

              &::after {
                content: "";
                width: 0;
                height: 0;
                border: 10px solid;
                border-color: transparent transparent #8F87D8;
                position: absolute;
                left: -4px;
                bottom: 1px;
              }
            }
          }

          .header-right {
            display: flex;
            align-items: center;

            img {
              width: 20px;
              height: 20px;
              margin-left: 4px;
            }
          }
        }

        .content {
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          line-height: 28px;
          margin: 16px 0;
          word-break: break-all;
        }

        .footer {
          display: flex;
          justify-content: space-between;
          font-weight: 400;
          font-size: 14px;
          color: #B3C0C8;

          .footer-left {
            display: flex;
          }

          .footer-right {
            display: flex;
          }
        }
      }
    }

    .close {
      cursor: pointer;
    }
  }
}

.record {
  position: absolute;
  right: 0;
  writing-mode: vertical-rl;
  top: 24px;
  width: 36px;
  height: 119px;
  background: #209EE4;
  box-shadow: 0px 0px 14px 0px rgba(4, 50, 75, 0.3);
  color: #fff;
  text-align: center;
  line-height: 36px;
  border-radius: 15px 0 0 15px;
  cursor: pointer;
  z-index: 99;
  transition: all ease .3s;
}

.add-record {
  width: 420px;
  height: 48px;
  background: #F5F7FB;
  border-radius: 3px 3px 3px 3px;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  color: #209EE4;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.badge {
  position: absolute;
  top: -5px;
  left: -5px;

}

.count {
  writing-mode: horizontal-tb;
  height: 20px;
  line-height: 20px;
}

.warning {
  background: rgb(236, 153, 3) !important;
}

.activeStyle {
  right: 480px !important;
  top: 114px !important
}
</style>